
ul li:first-child{
    color: blue;
}
ul li:last-child{
    color:green;
}

.system-notification{
    background-color: lightsalmon;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    color: #FFF;
    margin-bottom: 10px;
}

.normal-message{
    text-align: right;
    margin:0 10px 20px 20px;
}

.normal-message:hover{
    background-color: RGB(0, 250, 0);
}

.normal-message.others{
    text-align: left;
}
.normal-message .name-wrapper{
    color: rgba(0,0,0,.5);
}
.normal-message .content{
    display: inline-block;
    background-color: #b2e281;
    padding: 10px 20px;
    color: rgba(0,0,0,.7);
    border-radius: 3px;
    position: relative;
    margin-top: 5px;
    max-width: 60%;
    min-height: 40px;
    text-align: left;
}
.normal-message.others .content-wrapper{
    position: relative;
}
.normal-message.others .content{
    position: absolute;
    margin-left: 50px;
    background-color: #fff;
}
.normal-message.self .content:after,.chat-room-wrapper .normal-message.others .content:before{
    content:'';
    position: absolute;
    width: 0;
    height: 0;
    top: 10px;
    display: block;
    border:6px solid transparent;
}
.normal-message.self .content:after{
    left: 100%;
    border-left:4px solid #b2e281;
}
.normal-message.others .content:before{
    right: 100%;
    border-right:4px solid #fff;
}
